<script setup>
import { h, onMounted, ref, resolveDirective, withDirectives } from 'vue'
import {
  NButton,
  NCheckbox,
  NInput,
  NTag,
  useMessage,
  NFlex,
  NAvatar, NSelect, NInputNumber
} from 'naive-ui'

import api from '@/api'
const $table = ref(null)
const queryItems = ref({})
const vPermission = resolveDirective('permission')
const base_path = import.meta.env.VITE_BASE
const message = useMessage()
import default_image from "@/assets/images/mz.jpg"
import Info from '@/views/customer/user/info.vue'

const data = reactive({
  value: 0,
  customers:[],
  search_customer:'',
  goods:[],
  search_goods:'',
  select_customer:{
    id:0,
    name:"暂未选择",
    phone:"x",
    money_deposit:0
  },
  select_skus:[],
  select_price:0,
  select_goods:[],
  select_goods_nums:[],
  yue:0,
  coupons:[],
  select_coupons:[],
  select_space:1,
  desc:"",
  is_deposit:0,
  show_info:false,
});


onMounted(() => {
  api.getSpaceList().then((res) => (data.option_space = res.data))
  get_customers()
  get_goods()
})

function select_customer(item){
  data.select_customer.id = item.id
  get_customer_detail()
  message.success('已选择客户:'+item.name)
}

function show_info(item){
  data.show_info = true
  data.select_customer.id = item.id
}

function get_customers(){
  api.getSaasUserList({
    name:data.search_customer
  }).then((res) => (data.customers = res.data))
}

function get_goods(){
  api.getgoodsGood({
    name:data.search_goods
  }).then((res) => (data.goods = res.data))
}

function get_customer_detail(){
  api.getSaasUserDetail({
    id:data.select_customer.id
  }).then((res) => (data.select_customer = res.data))

  data.select_coupons = []
  api.getSaasUserCouponsList({
    user_id:data.select_customer.id
  }).then((res) => (data.coupons = res.data))
}
function handleChange(value, index1, index2){
  data.select_skus = []//选中的商品规则和数量
  data.select_price = 0
  data.goods[index1].sku[index2].select_nums = value;
  data.goods.map(item => {
    item.sku.map(item_sku => {
      if(item_sku.select_nums>0){
        // message.success('已选择商品:'+item.name)
        data.select_price+=item_sku.select_nums*item_sku.sku_level[1]
        data.select_skus.push(
            {
              "sku_id":item_sku.id,
              "sku_name":item_sku.sku_name,
              "num":item_sku.select_nums,
              "goods_name":item.name,
            }
        )
      }
    })

  });

}

function on_save(){
  if(!data.select_customer.id){
    message.error('请先选择客户')
    return
  }
  if(data.select_skus.length===0){
    message.error('请先选择购买商品数量')
    return
  }
  api.createPay({
    user_id:data.select_customer.id,
    address_id:data.select_space,
    remark:data.desc,
    coupons:data.select_coupons,
    sku:data.select_skus,
    is_deposit:data.is_deposit
  }).then((res) => {
    message.success(res.msg)
    get_customer_detail()
  })
}

</script>

<template>
  <AppPage :show-footer="false" style="padding-top: 60px;">
    <n-grid :cols="3" :x-gap="12" :y-gap="8">
      <n-gi>
        <n-card  style="height: calc(100vh - 100px);"  content-style="padding: 0px;"   title="客户选择" size="small" :segmented="{
          content: true,
          footer: 'soft',
        }" >
          <div style="margin:20px">
            <NInput v-model:value="data.search_customer" size="large" clearable type="text" placeholder="请输入姓名/手机号"
                    @keyup="get_customers()" />
          </div>
          <n-scrollbar style="max-height: calc(100vh - 250px);padding:0 20px 20px 20px">
            <n-card embedded  v-for="item in data.customers" class="customer_card" hover:card-shadow   size="small" :segmented="{
                    content: true,
                    footer: 'soft',
                  }"
                    @click="select_customer(item)"
            >
              <template #header>
                <div style="display: flex; align-items: center;" @click="show_info(item)">
                  <NAvatar :src="item.avatar" :fallbackSrc="default_image" style="width: 30px; height: 30px; margin-right: 10px;border-radius: 50%" />
                  <span>{{ item.name }}</span>
                </div>
              </template>
              <template #header-extra>
                <NTag type="error" v-if="item===data.select_customer">已选择</NTag>&nbsp;
                <NTag >{{item.role_name}}</NTag>

              </template>
              <template #footer>
                <span color="#ef504e"></span>
                <n-flex justify="space-between" size="large">
                  <div>卡号: <span>{{item.card_no}}</span> </div>
                  <div>电话: <span>{{item.phone}}</span></div>
                </n-flex>
              </template>
            </n-card>
          </n-scrollbar>
        </n-card>
      </n-gi>

      <n-gi>
        <n-card  style="height: calc(100vh - 100px);" content-style="padding: 0px;"   title="商品选择" size="small" :segmented="{
          content: true,
          footer: 'soft',
        }">
          <div style="margin:20px">
            <NInput v-model:value="data.search_goods" size="large" clearable type="text" placeholder="请输入商品名称"
                    @keyup="get_goods()" />
          </div>
          <n-scrollbar style="max-height: calc(100vh - 250px);padding:0 20px 20px 20px">
            <n-card embedded  v-for="(item,index1) in data.goods" class="customer_card" hover:card-shadow  size="small" :segmented="{
                    content: true,
                    footer: 'soft',
                  }">
              <template #header-extra>
                <NTag style="width: 100px" size="large">库存:{{item.kc}}</NTag>
              </template>
              <template #header>
                <div style="display: flex; align-items: center;">
                  <NAvatar :src="item.cover" :fallbackSrc="default_image" style="width: 30px; height: 30px; margin-right: 10px;" />
                  <span>{{ item.name }}</span>
                </div>
              </template>
              <template #footer>

                <n-flex v-for="(sku_item,index2) in item.sku" justify="space-between" size="large" style="width:100%;height:40px;line-height:40px;margin-bottom:5px">
                  <div>规格: <span>{{sku_item.sku_name}}(¥{{sku_item.sku_level[1]}})</span> </div>
                  <div> <n-input-number :min="0" style="width: 100px" v-model:value=sku_item.select_nums @update:value="(value) => handleChange(value, index1, index2)"/></div>
                </n-flex>


              </template>
            </n-card>
          </n-scrollbar>
        </n-card>
      </n-gi>

      <n-gi>
        <n-card   content-style="padding: 20px;"   title="收银台" size="small" :segmented="{
          content: true,
          footer: 'soft',
        }">
          <n-alert :title="'客户:'+data.select_customer.name+'('+data.select_customer.phone+')'" type="success">
            <div v-for="item in data.select_skus">{{item.good_name}}({{item.sku_name}})x{{item.num}} </div>
            <div>
              合计金额:¥{{data.select_price}}
            </div>
          </n-alert>

          <n-card class="customer_card"  :title="'可用余额(¥'+data.select_customer.money_deposit+')'" size="small" :segmented="{
                    content: true,
                    footer: 'soft',
                  }">
            <template #header-extra>
              <n-radio-group
                  v-model:value="data.is_deposit"
                  name="radiogroup"
                  :default-value="0"
                  v-if="data.select_customer.money_deposit>0"
              >
                <n-space>
                  <n-radio  key=0 :value=0>
                    否
                  </n-radio>
                  <n-radio  key=1  :value=1>
                    是
                  </n-radio>
                </n-space>
              </n-radio-group>
            </template>

          </n-card>
          <n-card class="customer_card"  title="优惠券支付" size="small" :segmented="{
                    content: true,
                    footer: 'soft',
                  }">
            <template #footer>
              <n-scrollbar style="max-height:130px;padding-right:30px">
                <n-checkbox-group v-model:value="data.select_coupons">
                  <n-card embedded  v-for="item in data.coupons" class="customer_card" hover:card-shadow  size="small" :segmented="{
                    content: true,
                    footer: 'soft',
                  }">

                    <template #footer>
                      <n-flex justify="space-between" size="small" style="width:100%;margin-bottom:5px">
                        <div><n-checkbox size="large" :label="item.type_name+'[¥'+item.coupons_price+']'" :value="item.id"/> </div>
                      </n-flex>

                    </template>
                  </n-card>
                </n-checkbox-group>
              </n-scrollbar>

            </template>
          </n-card>

          <NSelect

              style="width: 100%;margin-bottom:10px;"
              :options="data.option_space"
              clearable
              placeholder="请选结算门店"
              v-model:value="data.select_space"
          />
          <n-input button-placement="both" style="width: 100%;margin-bottom:10px;" size="large" v-model:value="data.desc" placeholder="备注"/>


          <n-button type="primary" style="float:right" @click="on_save">
            线下收款并开单
          </n-button>
        </n-card>
      </n-gi>
    </n-grid>

    <n-drawer v-model:show="data.show_info" width="50%" placement="right">
      <Info :info-data="data.select_customer"/>
    </n-drawer>
  </AppPage>
</template>

<style>
.customer_card{
  margin: 10px 0;
}
</style>
